<template>
    <div id="detail" v-loading.lock="loading">
        <header>
            <div class="title">
                <h1>{{info.departName}}</h1>
                <time>{{info.createTime}}</time>
            </div>
            <total :id="$route.params.id" :data="total"/>
        </header>
        <el-tabs type="border-card">
            <el-tab-pane label="实时监控">
                <div class="sift">
                    条件筛选
                    <div class="tools">
                        <button v-show="false" :class="['btn',{active:i===post.functionType}]" v-for="(x,i) in functionType" @click="post.functionType=i;getData()">{{x}}</button>
                        <el-date-picker v-model="post.date" :type="post.functionType?'month':'date'" placeholder="选择日期" value-format="yyyy-MM-dd" @change="e=>{this.getData()}" :clearable="false"/>
                        <button class="btn" @click="post.date=''"><i class="ri-refresh-line"></i>重置</button>
                    </div>
                </div>
                <el-collapse v-model="active[0]" accordion @change="clickTab">
                    <el-collapse-item :name="i" :key="x.deviceId" v-for="(x,i) in data">
                        <template slot="title">
                            <i class="ri-database-line"></i>
                            {{x.deviceName || '__'}}
                            <el-popover v-if="x.control" v-model="x.show_control" popper-class="popover-controls" placement="right" width="340" trigger="click" :ref="'popover'+i">
                                <div class="head" @click.stop>
                                    远程控制
                                    <i class="el-icon-close" @click="e=>{x.show_control=false}"></i>
                                </div>
                                <!--红外空调控制-->
                                <ul class="body" @click.stop="" v-if="x.controlType==='infraredControl'">
                                    <li>
                                        <h5>开关机：</h5>
                                        <div>
                                            <button @click="deviceControl(x,'BootStrap','开关机')">开机</button>
                                            <button @click="deviceControl(x,'ShutDown','开关机')">关机</button>
                                        </div>
                                    </li>
                                    <li>
                                        <h5>模式设置：</h5>
                                        <div>
                                            <button style="margin-bottom:10px" @click="deviceControl(x,'AutomaticMode','模式设置')">自动</button>
                                            <button style="margin-bottom:10px" @click="deviceControl(x,'Refrigeration','模式设置')">制冷</button>
                                            <button style="margin-bottom:10px" @click="deviceControl(x,'Dehumidification','模式设置')">除湿</button>
                                            <button @click="deviceControl(x,'BlowingIn','模式设置')">送风</button>
                                            <button @click="deviceControl(x,'Heating','模式设置')">制暖</button>
                                        </div>
                                    </li>
                                    <li>
                                        <h5>温度设置：</h5>
                                        <div>
                                            <el-select v-model="x.temperature" placeholder="">
                                                <el-option v-for="x in 16" :key="x" :label="x+15" :value="x+15"/>
                                            </el-select>
                                            <button @click="deviceControl(x,'Temperature','温度设置')">设定</button>
                                        </div>
                                    </li>
                                    <li>
                                        <h5>风速设置：</h5>
                                        <div>
                                            <button @click="deviceControl(x,'AutoWindSpeed','风速设置')">自动</button>
                                            <button @click="deviceControl(x,'OneWindSpeed','风速设置')">1档</button>
                                            <button @click="deviceControl(x,'TwoWindSpeed','风速设置')">2档</button>
                                            <button style="margin: 10px 0 0" @click="deviceControl(x,'ThreeWindSpeed','风速设置')">3档</button>
                                        </div>
                                    </li>
                                    <li>
                                        <h5>风向设置：</h5>
                                        <div>
                                            <button @click="deviceControl(x,'AutoWindDirection','风向设置')">自动摆风</button>
                                            <button @click="deviceControl(x,'ManualWindDirection','风向设置')">手动摆风</button>
                                        </div>
                                    </li>
                                </ul>
                                <!--电表控制-->
                                <ul class="body" @click.stop="" v-if="x.controlType==='meterOffOn'">
                                    <li>
                                        <h5>拉合闸控制：</h5>
                                        <div>
                                            <button @click="deviceControl(x,'closeMeter','拉合闸控制')">拉闸</button>
                                            <button @click="deviceControl(x,'openMeter','拉合闸控制')">合闸</button>
                                        </div>
                                    </li>
                                    <li>
                                        <h5>定时控制：</h5>
                                        <div>
                                            <el-tooltip content="拉闸时间" placement="top-start">
                                                <el-time-picker v-model="x.meteroffTime" placeholder="拉闸时间" :clearable="false" value-format="HH:mm" :picker-options="{format:'HH:mm'}"/>
                                            </el-tooltip>
                                            <el-tooltip content="合闸时间" placement="top-start">
                                                <el-time-picker v-model="x.meteronTime" placeholder="合闸时间" :clearable="false" value-format="HH:mm" :picker-options="{format:'HH:mm'}"/>
                                            </el-tooltip>
                                        </div>
                                    </li>
                                    <li>
                                        <h5>定时开关：</h5>
                                        <div>
                                            <el-switch v-model="x.status" @change="v=>timingSwitch(v,x)"/>
                                        </div>
                                    </li>
                                </ul>
                                <button slot="reference" v-popover @click.stop="showControl(x)" class="btn">
                                    <i class="ri-settings-3-fill"></i>控制
                                </button>
                            </el-popover>
                            <button v-if="x.control && x.controlType==='meterOffOn'" class="btn" @click.stop="show_meter_log=true;deviceId=x.deviceId;getMeterLogList()">日志</button>
                            <button v-if="x.control && x.controlType==='infraredControl'" class="btn" @click.stop="show_infrared_log=true;deviceId=x.deviceId;getInfraredLogList()">日志</button>
                        </template>
                        <el-radio-group v-if="!x.temphumDevice" v-model="radio" size="mini" @change="selectRadio">
                            <el-radio-button :label="k" v-for="(v,k) in selectType"/>
                        </el-radio-group>
                        <div class="chart" :id="'chart'+i"></div>
                    </el-collapse-item>
                </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="机房概况">
                <el-collapse v-model="active[1]" accordion>
                    <el-collapse-item name="0">
                        <template slot="title">
                            <i class="ri-article-line"></i>
                            基本信息
                        </template>
                        <table border="1">
                            <tr>
                                <td>机房名称</td>
                                <td>{{info.departName || '__'}}</td>
                                <td>市公司</td>
                                <td>{{info.company || '__'}}</td>
                            </tr>
                            <tr>
                                <td>分公司</td>
                                <td>{{info.branch || '__'}}</td>
                                <td>营服中心</td>
                                <td>{{info.serviceCenter || '__'}}</td>
                            </tr>
                            <tr>
                                <td>机楼</td>
                                <td>{{info.machineBuilding || '__'}}</td>
                                <td>机房面积</td>
                                <td>{{info.machineRoomArea || '__'}}</td>
                            </tr>
                            <tr>
                                <td>可装机面积</td>
                                <td>{{info.useRoomArea || '__'}}</td>
                                <td>空调数量</td>
                                <td>{{info.airConditioningNum || 0}}</td>
                            </tr>
                            <tr>
                                <td>地址</td>
                                <td>{{info.address || '__'}}</td>
                                <td>pue计算公式</td>
                                <td>{{info.pue || '__'}}</td>
                            </tr>
                            <tr>
                                <td>机房备注</td>
                                <td>{{info.engineRemake || '__'}}</td>
                            </tr>
                        </table>
                    </el-collapse-item>
                    <el-collapse-item name="1">
                        <template slot="title">
                            <i class="ri-article-line"></i>
                            设备照片
                        </template>
                        <img v-if="info.devicePic" v-for="x in img(info.devicePic)" :src="img_pre+x" alt="">
                    </el-collapse-item>
                    <el-collapse-item name="2">
                        <template slot="title">
                            <i class="ri-article-line"></i>
                            环境照片
                        </template>
                        <img v-if="info.environmentPic" v-for="x in img(info.environmentPic)" :src="img_pre+x" alt="">
                    </el-collapse-item>
                    <el-collapse-item name="3">
                        <template slot="title">
                            <i class="ri-article-line"></i>
                            空调照片
                        </template>
                        <img v-if="info.airConditioningPic" v-for="x in img(info.airConditioningPic)" :src="img_pre+x" alt="">
                    </el-collapse-item>
                </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="能耗分析">
                <div class="sift">
                    条件筛选
                    <div class="tools">
                        <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="selectTime" value-format="yyyy-MM-dd" :clearable="false"/>
                        <button @click="time=null" class="btn"><i class="ri-refresh-line"></i>重置</button>
                    </div>
                </div>
                <el-collapse v-model="active[2]" accordion @change="clickTab2">
                    <el-collapse-item :name="i" v-for="(x,i) in energy">
                        <template slot="title">
                            <i class="ri-battery-charge-line"></i>
                            {{x.title}}
                        </template>
                        <div class="chart" :id="'chart1'+i"></div>
                    </el-collapse-item>
                </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="维护记录"><div style="padding: 25px;font-size: 20px;text-align: center">暂无数据</div></el-tab-pane>
            <el-tab-pane label="报警管理">
                <el-table :data="warning" style="width: 100%">
                    <el-table-column prop="area" label="区域"/>
                    <el-table-column prop="deviceName" label="设备名称"/>
                    <el-table-column prop="alarmType" label="告警类型"/>
                    <el-table-column prop="alarmContent" label="告警内容"/>
                    <el-table-column prop="status" label="处理状态"/>
                    <el-table-column prop="uploadTime" label="告警时间"/>
                </el-table>
            </el-tab-pane>
        </el-tabs>

        <el-dialog title="操作日志" :visible.sync="show_meter_log">
            <el-table border stripe :data="log_list.meterLolist">
                <el-table-column property="sendType" label="指令类型"/>
                <el-table-column property="sendValue" width="150" label="指令内容"/>
                <el-table-column property="createName" width="150" label="操作人"/>
                <el-table-column property="createDate" width="160" label="操作时间"/>
            </el-table>
            <el-pagination @current-change="getMeterLogList" background layout="total,prev, pager, next" :total="log_list.total*1 || 0"/>
            <div style="clear: both"></div>
        </el-dialog>

        <el-dialog title="操作日志" :visible.sync="show_infrared_log">
            <el-table border stripe :data="log_list.InfraredLogList">
                <el-table-column property="sendType" label="指令类型"/>
                <el-table-column property="sendValue" width="150" label="指令内容"/>
                <el-table-column property="createName" width="150" label="操作人"/>
                <el-table-column property="createDate" width="160" label="操作时间"/>
            </el-table>
            <el-pagination @current-change="getInfraredLogList" background layout="total,prev, pager, next" :total="log_list.total*1 || 0"/>
            <div style="clear: both"></div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    let echarts=require('echarts');
    import Total from '../../component/Total'
    export default {
        data() {
            return {
                show_meter_log: false,
                show_infrared_log: false,
                log_list:{
                    total:0,
                    meterLolist:[],
                    InfraredLogList:[]
                },
                radio:'电流',
                functionType:['日','月'],
                unit:['','A','V','KW','KW·h'],
                selectType:{'电流':1,'电压':2,'功率':3,'能耗':4},
                post:{
                    functionType:0,
                    selectType:1,
                    deptId:this.$route.params.id,
                    date:new Date().toJSON().split('T')[0]
                },
                img_pre:IMAGE_PREFIX,
                date:new Date().toJSON().split('T')[0],
                active:[0,'0',''],
                time:[new Date().getFullYear()+'-01-01',new Date().getFullYear()+'-12-31'],//时间段
                id:this.$route.params.id,//机房id
                deviceId:'',//当前设备id
                data:[],//实时监控
                loading:false,
                energy:[
                    {title:'日用电量',data:[]},
                    {title:'月用电量',data:[]},
                    {title:'年用电量',data:[]},
                    {title:'月PUE',data:[]},
                    {title:'用电环比',data:[]},
                    {title:'用电同比',data:[]},
                ],
                info:{},//概况
                warning:[],//报警管理
                total: {
                    totalEnergyCount:{name: '总能耗', class: 'all-energy'},
                    yearEnergyCount:{name: '本年能耗', class: 'year-energy'},
                    monthEnergyCount:{name: '本月能耗', class: 'month-energy'},
                    alarmCount:{name: '报警次数', class: 'warning'},
                },
                command:{
                    closeMeter:'拉闸',
                    openMeter:'合闸',
                    BootStrap:'开机',
                    ShutDown:'关机',
                    AutomaticMode:'自动',
                    Refrigeration:'制冷',
                    Dehumidification:'除湿',
                    BlowingIn:'送风',
                    Heating:'制暖',
                    Temperature:'温度设置',
                    AutoWindSpeed:'自动',
                    OneWindSpeed:'1档',
                    TwoWindSpeed:'2档',
                    ThreeWindSpeed:'3档',
                    AutoWindDirection:'自动摆风',
                    ManualWindDirection:'手动摆风'
                }
            }
        },
        mounted(){
            this.start();
        },
        methods:{
            //定时开关
            timingSwitch(status,x){
                if(x.status && (!x.meteroffTime || !x.meteronTime)){
                    this.$message.error('拉合闸时间必填');
                    x.status=false;
                    return ;
                }

                this.confirm('定时开关',x.status?'开启':'关闭').then(()=>{
                    this.loading=true;
                    this.$axios.detail.setMeterStrategy({
                        deviceId:x.deviceId,
                        status:x.status?1:0,
                        meteroffTime:x.meteroffTime,
                        meteronTime:x.meteronTime
                    }).then(v=>{
                        this.loading=false;
                        if(v.code==200){
                            this.$message({
                                message:v.message ,
                                type: 'success'
                            });
                        }else{
                            this.$message.error(v.message)
                        }
                    })
                }).catch(()=>{
                    x.status=!x.status
                })
            },
            //设备控制
            deviceControl(x,type,name){
                let str=type==='Temperature'?x.temperature:this.command[type];
                this.confirm(name,str).then(()=>{
                    this.loading=true;
                    this.$axios.detail.deviceControl({
                        controlType:x.controlType,
                        deviceId:x.deviceId,
                        temperature:x.temperature,
                        command:type
                    }).then(v=>{
                        this.loading=false;
                        if(v.code=200){
                            this.$message({
                                message:v.message ,
                                type: 'success'
                            });
                        }
                    })
                })
            },
            //查询日志
            getMeterLogList(page=1){
                this.loading=true;
                this.$axios.detail.getMeterLogList({deviceId:this.deviceId,current:page}).then(v=>{
                    this.loading=false;
                    if(v.code==200){
                        this.log_list.total=v.data.total;
                        this.log_list.current=v.data.current;
                        this.log_list.meterLolist=v.data.meterLolist
                    }
                })
            },
            //查询日志
            getInfraredLogList(page=1){
                this.loading=true;
                this.$axios.detail.getInfraredLogList({deviceId:this.deviceId,current:page}).then(v=>{
                    this.loading=false;
                    if(v.code==200){
                        this.log_list.current=v.data.current;
                        this.log_list.total=v.data.total;
                        this.log_list.InfraredLogList=v.data.InfraredLogList
                    }
                })
            },
            //开启控制弹窗
            showControl(x){
                if(x.show_control)return ;
                this.loading=true;
                this.$axios.detail.getMeterStrategy({deviceId:x.deviceId}).then(v=>{
                    this.loading=false;
                    if(v.code==200){
                        x.meteroffTime=v.data.meteroffTime || '23:00';
                        x.meteronTime=v.data.meteronTime || '06:00';
                        x.status=v.data.status==1;
                    }
                })
            },
            confirm(before,after){
                let a=confirm(`您正在将【${before}】设定为【${after}】，请确认是否执行此操作？`);
                return a?Promise.resolve():Promise.reject();
                return this.$confirm(`<p>您正在将 <span style="color: #1148ae">${before}</span> 设定为 <span style="color: #1148ae">${after}</span>，<br>请确认是否执行此操作？</p>`,'操作确认', {
                    dangerouslyUseHTMLString: true,
                    showCancelButton: true,
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                })
            },
            //初始化
            start(){
                this.$axios.detail.getRoomStatement({departId:this.id}).then(v=>{
                    if(v.code==200) this.info=v.data;
                });
                this.$axios.detail.getAlarmInfo({departId:this.id}).then(v=>{
                    if(v.code==200) this.warning=v.data;
                });
                this.getData();
                this.selectTime(this.time);
            },
            //selectType
            selectRadio(v){
                let obj=this.post;
                obj.selectType=this.selectType[v];
                this.getData(obj)
            },
            //获取实时数据
            getData(data=this.post){
                if(!this.post.date) return ;
                this.loading=true;
                this.$axios.detail.real_time(data).then(v=>{
                    this.loading=false;
                    if(v.code==200){
                        if(v.data.length<=0)return ;
                        let arr=v.data.map(vdata=>{
                            let x=[],y={};
                            let obj=vdata.realdata || {};
                            if(vdata.temphumDevice || data.selectType!=3){
                                [x,y]=this.chartFormat(obj,'y');
                                if(data.selectType==4 && !vdata.temphumDevice)
                                    x=x.map(o=>`${o}:00-${o*1+1}:00`);
                            }else{
                                x=obj.map(o=>o.time);
                                y={
                                    'A相功率':obj.map(o=>o.a_p),
                                    'B相功率':obj.map(o=>o.b_p),
                                    'C相功率':obj.map(o=>o.c_p)
                                }
                            }
                            let obj1={
                                temphumDevice:vdata.temphumDevice,
                                show_control:false,
                                temperature:16,//温度
                                speed:'自动',//风速
                                direction:'自动',//方向
                                switch:false,//开关
                                status:false,//定时开关
                                data:[x,y],
                                meteroffTime:'',//拉闸时间
                                meteronTime:''//合闸时间
                            };
                            return {...vdata,...obj1}
                        });
                        this.data=arr;
                        arr.forEach((item,i)=>{this.clickTab(i)});
                    }else{
                        this.$message.error(v.message);
                        this.data=[];
                    }
                })
            },
            chartFormat(obj,v,v1){
                let x=[],y={},y1={};
                for(let k1 in obj){
                    for(let item of obj[k1]){
                        y[item.name]=[];
                        y1[item.name]=[];
                    }
                }
                for(let k1 in obj){
                    x.push(k1);
                    for(let k2 in y){
                        let a=true;
                        for(let item of obj[k1]){
                            if(k2==item.name){
                                a=false;
                                y[k2].push(item[v]);
                                if(v1) y1[k2].push(item[v1]);
                            }
                        }
                        if(a){
                            y[k2].push('');
                            y1[k2].push('');
                        }
                    }
                }
                return [x,y,y1]
            },
            //筛选时间段
            selectTime(v){
                this.loading=true;
                if(v){
                    let month=x=>x.split('-')[0]+'-'+x.split('-')[1];
                    let year=x=>x.split('-')[0];
                    let obj=type=>{
                        let [start,end]=v;
                        if(type=='month'){
                            start=month(start);
                            end=month(end)
                        }else if(type=='year'){
                            start=year(start);
                            end=year(end)
                        }
                        return {
                            departId:this.id,startTime:start,endTime:end
                        }
                    };
                    //日用电
                    this.$axios.detail.getDayEnergy(obj()).then(v=>{
                        this.loading=false;
                        if(v.code=='200'){
                            this.energy[0].data=this.chartFormat(v.data.dayEnergyList,'energyNum');
                            this.clickTab2(0)
                        }else{
                            this.energy[0].data=[];
                            this.$message.error(v.message)
                        }
                    });
                    //月用电
                    this.$axios.detail.getMonthEnergy(obj('month')).then(v=>{
                        this.loading=false;
                        if(v.code=='200'){
                            this.energy[1].data=this.chartFormat(v.data.monthEnergyList,'energyNum');
                            this.clickTab2(1)
                        }else{
                            this.energy[1].data=[];
                            this.$message.error(v.message)
                        }
                    });
                    //年用电
                    this.$axios.detail.getYearEnergy(obj('year')).then(v=>{
                        this.loading=false;
                        if(v.code=='200'){
                            this.energy[2].data=this.chartFormat(v.data.yearEnergyList,'energyNum');
                            this.clickTab2(2)
                        }else{
                            this.energy[2].data=[];
                            this.$message.error(v.message)
                        }
                    });
                    //月pue
                    this.$axios.detail.getMonthPue(obj('month')).then(v=>{
                        this.loading=false;
                        if(v.code=='200'){
                            let data=v.data.pueList;
                            this.energy[3].data=[data.map(o=>o.time),{'pue':data.map(o=>o.pue)}];
                            this.clickTab2(3)
                        }else{
                            this.energy[3].data=[];
                            this.$message.error(v.message)
                        }
                    });
                    //环比
                    this.$axios.detail.getLink(obj('month')).then(v=>{
                        this.loading=false;
                        if(v.code=='200'){
                            this.energy[4].data=this.chartFormat(v.data.linkList,'thisEnergy','link');
                            this.clickTab2(4)
                        }else{
                            this.energy[4].data=[];
                            this.$message.error(v.message)
                        }
                    });
                    //同比
                    this.$axios.detail.getRatio(obj('month')).then(v=>{
                        this.loading=false;
                        if(v.code=='200'){
                            this.energy[5].data=this.chartFormat(v.data.linkList,'thisEnergy','link');
                            this.clickTab2(5)
                        }else{
                            this.energy[5].data=[];
                            this.$message.error(v.message)
                        }
                    })
                }
            },
            //第一个手风琴
            clickTab(v){
                if(v==='')return ;
                this.linesChart('chart'+v,this.data[v])
            },
            //第二个手风琴
            clickTab2(v){
                if(v==='')return ;
                let ref = 'chart1' + v, data = this.energy[v].data;
                if (v >= 4) this.lineBarChart(ref,data,this.energy[v].title);
                else this.lineAreaChart(ref, data)
            },
            linesChart(ref,v){
                let data=v.data;
                this.$nextTick(e=>{
                    let mychart=echarts.init(document.getElementById(ref)),legend=[],series=[];
                    for(let k in data[1]){
                        legend.push(k);
                        series.push({
                            name:k,
                            type: 'line',
                            showAllSymbol: true,
                            symbolSize:data[1][k].length>15?0:5,
                            data:data[1][k]
                        })
                    }
                    mychart.setOption({
                        color:['#FF7F50','#87CEFA','#DA70D6','#32CD32'],
                        tooltip : {trigger: 'axis'},
                        dataZoom: {
                            show: data[0].length>20,
                        },
                        legend: {data:legend},
                        grid: {
                            top:'10%',
                            left: '3%',
                            right: '1%',
                            bottom: '40',
                            containLabel: true
                        },
                        calculable : true,
                        xAxis: {
                            type: 'category',
                            axisLabel:{rotate:45},
                            data: data[0].map(o=>o.split(' ')[1] || o)
                        },
                        yAxis: {
                            name:'单位：'+(v.temphumDevice?'℃':this.unit[this.post.selectType]),
                            axisLine: {show:false},
                            axisTick: {show:false},
                            type: 'value',
                            scale : true,
                        },
                        series : series
                    },true);
                    mychart.resize();
                });
            },
            lineAreaChart(ref,data){
                this.$nextTick(e=>{
                    let myChart=echarts.init(document.getElementById(ref)),legend=[],series=[];
                    for(let k in data[1]){
                        legend.push(k);
                        series.push({
                            name:k,
                            type: 'line',
                            symbolSize:data[1][k].length>15?0:5,
                            data:data[1][k],
                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        })
                    }
                    myChart.setOption({
                        color:['#FF7F50','#87CEFA','#DA70D6','#32CD32'],
                        tooltip : {trigger: 'axis'},
                        dataZoom: {
                            show: data[0].length>20,
                            end :2000/data[0].length
                        },
                        legend: {data:legend},
                        grid: {
                            left: '3%',
                            right: '3%',
                            bottom: '40',
                            top:'10%',
                            containLabel: true
                        },
                        calculable:true,
                        xAxis: {
                            type: 'category',
                            axisLabel:{rotate:45},
                            data: data[0],
                        },
                        yAxis: {
                            name:'单位：KW·h',
                            axisLine: {show:false},
                            axisTick: {show:false},
                            type: 'value',
                        },
                        series:series
                    },true);
                    myChart.resize();
                });
            },
            lineBarChart(ref,data,name){
                this.$nextTick(e=>{
                    let myChart=echarts.init(document.getElementById(ref),'light'),legend=[],series=[],selected={};
                    for(let k in data[1]){
                        legend.push(k);
                        series.push({
                            name:k,
                            type:'bar',
                            data:data[1][k],
                        });
                        selected[k]=k==='总计';
                    }
                    for(let k in data[2]){
                        series.push({
                            name:k,
                            type: 'line',
                            yAxisIndex: 1,
                            data:data[2][k].map(o=>o && (o*100).toFixed(2)),
                            showAllSymbol: true,
                            symbolSize:7
                        })
                    }
                    myChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            },
                            formatter(v){
                                let str=`时间：${v[0].name}<br>`;
                                for(let x of v){
                                    str+=`${x.marker} ${x.seriesName}(${x.seriesType==='bar'?'电量':name.substr(2,2)})：${x.value+(x.value && x.seriesType==='line'?'%':'')}<br/>`
                                }
                                return str
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '3%',
                            bottom: '1%',
                            top:'50',
                            containLabel: true
                        },
                        legend: {data:legend,selected},
                        xAxis: [{
                            type: 'category',
                            data: data[0],
                            axisPointer: {
                                type: 'shadow'
                            }
                        }],
                        yAxis: [
                            {
                                type: 'value',
                                name: '单位 KW·h',
                                axisLine: {show:false},
                                axisTick: {show:false},
                            },
                            {
                                type: 'value',
                                name: '百分比 %',
                                axisLine: {show:false},
                                axisTick: {show:false},
                                splitLine:{lineStyle:{type:'dashed'}},
                            }
                        ],
                        series:series
                    },true);
                    myChart.resize();
                })
            },
            img(v){
                return v?v.split(','):[]
            },
        },
        watch:{
            '$route.params.id'(v){
                this.post.deptId=this.id=v;
                this.start();
            }
        },
        components:{Total}
    }
</script>
<style lang="less" rel="stylesheet/less">
    .el-popover.popover-controls{
        padding: 0;
        .head{
            line-height: 40px;
            border-bottom:1px solid #eee;
            color: #1148ae;
            font-size: 16px;
            padding: 0 15px;
            i{
                float: right;
                display: block;
                line-height: 40px;
                color: #aaa;
                font-weight: bold;
                font-size: 14px;
                cursor: pointer;
            }
        }
        .body{
            padding: 10px 20px;
            font-size: 12px;
            li{
                display: flex;
                padding: 10px 0;
                align-items: center;
                h5{
                    width: 85px;
                }
                &>div{
                    padding: 0 0 0 5px;
                    display: inline-flex;
                    width: 220px;
                    align-items: center;
                    flex-wrap: wrap;
                    .tips{
                        color: #1148ae;
                        line-height: 20px;
                    }
                    .el-switch{
                        margin: 0 10px 0 0;
                        &.is-checked .el-switch__core{
                            background: linear-gradient(to bottom,#0573d9,#0dc0f7);
                        }
                    }
                    .el-radio-button{
                        .el-radio-button__inner{
                            padding: 5px 15px;
                            font-size: 12px;
                            background: linear-gradient(to bottom,#fff,#ededed 83%,#fff);
                        }
                        &.is-active{
                            .el-radio-button__inner{
                                background: linear-gradient(to bottom,#0573d9,#0dc0f7);
                            }
                        }
                    }

                    .el-select{
                        width: 60px;
                        line-height: 24px;
                        margin: 0 10px 0 0;
                        .el-input__inner{
                            padding: 0 20px 0 10px;
                            height: 25px;
                            border-radius: 2px;
                            box-shadow: 0 2px 4px rgba(0,0,0,.1) inset;
                        }
                        .el-input__suffix .el-input__icon{
                            line-height: 26px;
                            color: #333;
                        }
                    }
                    .el-date-editor{
                        line-height: 28px;
                        font-size: 12px;
                        width: 80px;
                        margin: 0 10px 0 0;
                        .el-input__prefix{
                            left:0;
                        }
                        .el-input__icon{
                            line-height: 28px;
                            color: #333;
                        }
                        .el-input__inner{
                            height: 28px;
                            padding: 0 0 0 23px;
                            box-shadow: 0 2px 4px rgba(0,0,0,.1) inset;
                            border-radius: 2px;
                        }
                    }
                    button{
                        height: 23px;
                        line-height: 23px;
                        background: linear-gradient(to bottom,#78de1e,#1aa619);
                        color: #fff;
                        padding: 0 15px;
                        border: 1px solid #1e9618;
                        margin:  0 10px 0 0;
                        box-shadow: 0 5px 2px rgba(37,173,26,.3);
                        cursor: pointer;
                    }
                }
            }
        }
    }
    #detail {
        background: #fff;
        padding: 20px ;
        header{
            overflow: hidden;
            .title{
                float: left;
                h1{
                    font-size: 32px;
                    margin: 20px 0 10px;
                }
                time{
                    color: #777;
                    font-size: 17px;
                }
            }
            .total{
                float: right;
            }
        }
        .el-dialog__header{
            border-bottom: 1px solid #eee;
        }
        .el-pagination{
            margin: 15px 0 0 ;
            float: right;
            padding: 0;
        }
        .el-tabs{
            box-shadow: none;
            border: 0;
            &.el-tabs--border-card>.el-tabs__header{
                padding: 0 0 0 25px;
                background: transparent;
                .el-tabs__item{
                    background: #888C93;
                    margin: 0 5px 0 0;
                    color: #fff;
                    border-top:1px solid #DCDFE6 ;
                    border-radius: 4px 4px 0 0;
                    height: 35px;
                    line-height: 35px;
                    &.is-active{
                        background: #f5f5f5;
                        color: #777;
                        font-weight: bold;
                    }
                }
            }

            .sift{
                height: 60px;
                line-height: 60px;
                background: #f5f5f5;
                padding: 0 25px;
                font-size: 14px;
                border-bottom: 1px solid #DCDFE6;
                .tools{
                    float: right;

                    .el-input__inner{
                        border: 1px solid #aaa;
                        background: linear-gradient(to bottom,#fff,#ededed 83%,#fff);
                        box-shadow: 0 0 4px rgba(0,0,0,.1);
                        .el-range-input{
                            background: none;
                        }
                    }
                    .el-date-editor{
                        margin: 0 0 0 15px;
                        .el-range-separator{
                            width: auto
                        }
                    }
                }

            }
            .el-tabs__content{
                border:1px solid #DCDFE6;
                border-top:0;
                padding: 0;
                background: #fff;
                .el-collapse{
                    .el-collapse-item__header{
                        height: 65px;
                        line-height: 65px;
                        background: #f5f5f5;
                        padding: 0 20px 0 25px;
                        font-size: 16px;
                        &>i:first-child{
                            font-size: 35px;
                            color: #0CB4FA;
                            margin: 0 10px 0 0;
                        }
                        &.is-active{
                            border-bottom: 1px dashed #DCDFE6;
                        }
                    }
                    .el-collapse-item__content{
                        padding:15px;
                        .el-radio-button__orig-radio:checked+.el-radio-button__inner{
                            background: linear-gradient(to bottom,#0573d9,#0dc0f7);
                            color: #fff;
                        }
                        .el-radio-button--mini .el-radio-button__inner{
                            padding: 10px 30px;
                            color: #777;
                            background: linear-gradient(to bottom,#fff,#ededed 83%,#fff);
                        }
                        .chart{
                            height: 300px;
                            width:100%;
                            margin: 20px 0 0;
                        }
                        table{
                            width: 100%;
                            border: 1px solid #eee;
                            td{
                                height: 45px;
                                padding: 0 15px;
                                vertical-align: middle;
                                &:nth-child(2n-1){
                                    background: #f8f9fc;
                                }
                            }
                        }
                        img{
                            vertical-align: middle;
                            margin:10px 0 10px 10px;
                            width: 100px;
                            height: 100px;
                            object-fit: cover;
                            &:first-child{
                                margin-left: 0;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
